<template>
	<view class="container">
		<view class="top_background" :style="{'background':templateConfig.page.themeColor}"></view>
		<view class="main_content_box">
			<view class="main_top_head">
				<view class="main_top_head_left">
					<image class="head_icon" src="@/static/images/distribution/logo.png" mode="aspectFill"></image>
					<view class="company_text">大川长风</view>
					<view class="level_box">
						<image class="level_icon" src="@/static/images/distribution/level_icon.png" mode="aspectFill"></image>
						<view class="head_icon_text">白银</view>
					</view>
				</view>
				<view class="main_top_head_right" @click="showShare">
					<image class="share_icon" src="@/static/images/distribution/share.png" mode="aspectFill"></image>
					<view class="share_text">分享</view>
				</view>
			</view>
			<view class="main_box">
				<view class="main_account">
					<view class="account_top">
						<view class="account_top_text">
							<view>可提现(元)</view>
							<view class="withdraw_record_box" @click="gotoPath('/packageA/user/distribution/withdrawRecord')">
								<view class="withdraw_record">提现记录</view>
								<u-icon name="arrow-right" size="14"></u-icon>
							</view>
						</view>
						<view class="balance">999.99</view>
					</view>
					<view class="account_middle">
						<view class="account_middle_item">
							<view>待入账(元)</view>
							<view class="number">100.22</view>
						</view>
						<view class="account_middle_item">
							<view>提现中(元)</view>
							<view class="number">200.78</view>
						</view>
						<view class="account_middle_item">
							<view>已提现(元)</view>
							<view class="number">1000.00</view>
						</view>
					</view>
					<view class="account_bottom">
						<view class="button" :style="{background: templateConfig.page.themeColor}">
							<text class="text">转入余额</text>
							<u-icon name="error-circle" color="#fff" @click.native.stop="shiftToBal_show()"></u-icon>
						</view>
						<view
							class="button"
							:style="{background: templateConfig.page.themeColor}"
							@click="gotoPath('/packageA/user/distribution/withdraw')"
						>
							<text class="text">立即提现</text>
							<u-icon name="error-circle" color="#fff"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="total_money_box">
					<view class="total_money_item border_line">
						<text class="number">2200.77</text>
						<text class="text">累计佣金</text>
					</view>
					<view class="total_money_item" @click="gotoPath('/packageA/user/distribution/pushTotal')">
						<text class="number">8899</text>
						<text class="text">推广人数(人)</text>
					</view>
				</view>
				
				<view class="menu_box">
					<view class="menu_item" @click="gotoPath('/packageA/user/distribution/distributionOrder')">
						<view class="menu_left">
							<u-icon name="gift-fill"></u-icon>
							<text class="menu_title">分销订单</text>
						</view>
						<view class="menu_right">
							<text class="desc">目前120笔订单</text>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
					<view class="menu_item" @click="gotoPath('/packageA/user/distribution/incomeRanking')">
						<view class="menu_left">
							<u-icon name="gift-fill"></u-icon>
							<text class="menu_title">佣金排行</text>
						</view>
						<view class="menu_right">
							<text class="desc">您的排名28</text>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
					<view class="menu_item">
						<view class="menu_left">
							<u-icon name="gift-fill"></u-icon>
							<text class="menu_title">分销等级</text>
						</view>
						<view class="menu_right">
							<text class="desc">不同等级佣金不同</text>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
					<view class="menu_item" @click="distribution_show">
						<view class="menu_left">
							<u-icon name="gift-fill"></u-icon>
							<text class="menu_title">分销逻辑</text>
						</view>
						<view class="menu_right">
							<text class="desc">分销规则解读</text>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<ShareCover ref="ShareCover"></ShareCover>
		<noticePop ref="notice_pop"></noticePop>
	</view>
</template>

<script>
	import ShareCover from "./components/share-cover.vue";
	import noticePop from "./components/notice-pop.vue";
	export default {
		components: {
			ShareCover, 
			noticePop
		},
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				Share_show: false,
				balanceNotice: {
					title: '转入余额提示',
					content: '转入您的小程序余额，可以直接消费立即提现提示：申请提现1-3工作日到账，提现收费费1%！'
				},
				distributionNotice: {
					title: '分销逻辑解释',
					content: `1.A推广B ，B下单， A获取佣金 ； B推广C ，A没有佣金 ，以此类推！ 
							2.当A推广B后，B也成为代理，A依然获取B下单佣金 
							3.B不是代理，B推广给任何人均无佣金！ 
							4.A和B都是代理，推广给C，C用户通过谁的链接最先注册佣金分给谁！ 
							5.A代理取消后，所有用户不再返佣！A的用户归为平台老用户！ 
							6.非代理推荐用户默认为平台用户，代理推广老用户，没有佣金关系！`
				}
			};
		},
		onLoad () {
			this.templateConfig= uni.getStorageSync('templateConfig')
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.templateConfig.page.themeColor,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
		},
		methods: {
			showShare () {
				this.$refs.ShareCover.open();
			},
			gotoPath (url) {
				uni.navigateTo({
					url: url
				})
			},
			shiftToBal_show () {
				this.$refs.notice_pop.open(this.balanceNotice);
			},
			distribution_show () {
				this.$refs.notice_pop.open(this.distributionNotice);
			}
		}
	}
</script>


<style>
	page{
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container{
		width: 100%;
		position: relative;
		
		.top_background{
			width: 100%;
			height: 400rpx;
		}
		
		.main_content_box{
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			
			.main_top_head{
				width: 100%;
				padding: 26rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.main_top_head_left{
					display: flex;
					align-items: center;
					padding-left: 20rpx;
					box-sizing: border-box;
					
					.head_icon{
						width: 64rpx;
						height: 64rpx;
						margin-right: 20rpx;
					}
					
					.company_text{
						color: #fff;
						margin-right: 30rpx;
					}
					
					.level_box{
						height: 32rpx;
						display: flex;
						align-items: center;
						background-color: #fff;
						padding: 0 20rpx;
						border-radius: 16rpx;
						position: relative;
						
						.level_icon{
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							left: -8rpx;
						}
						
						.head_icon_text{
							font-size: 22rpx;
							color: #B5BCC7;
							margin-left: 20rpx;
							line-height: 32rpx;
						}
					}
				}
				
				.main_top_head_right{
					height: 60rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					border-top-left-radius: 30rpx;
					border-bottom-left-radius: 30rpx;
					background-color: rgba(255, 255, 255, 0.2);
					
					.share_icon{
						width: 32rpx;
						height: 32rpx;
					}
					.share_text{
						font-size: 28rpx;
						color: #fff;
						margin-left: 14rpx;
					}
				}
			}
			
			.main_box{
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				
				.main_account{
					width: 100%;
					border-radius: 14rpx;
					background-color: #fff;
					padding: 10rpx 40rpx;
					box-sizing: border-box;
					
					.account_top{
						padding: 30rpx 0;
						color: #86909C;
						font-size: 24rpx;
						
						.account_top_text{
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.withdraw_record_box{
								display: flex;
								align-items: center;
							}
						}
						
						.balance{
							color: #ED5259;
							font-weight: bold;
							margin-top: 4rpx;
							font-size: 32rpx;
						}
					}
					
					.account_middle{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx 0;
						color: #86909C;
						font-size: 26rpx;
						
						.number{
							color: #000;
							font-weight: bold;
							margin-top: 10rpx;
						}
					}
					
					.account_bottom{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 30rpx 0;
						
						.button{
							width: 272rpx;
							height: 76rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 38rpx;
							color: #fff;
							font-size: 28rpx;
							
							.text{
								margin-right: 20rpx;
							}
						}
					}
				}
				.total_money_box{
					width: 100%;
					margin-top: 20rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 14rpx;
					
					.total_money_item{
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.number{
							margin-bottom: 14rpx;
							color: #303030;
							font-size: 36rpx;
							font-weight: bold;
						}
						.text{
							color: #86909C;
							font-size: 24rpx;
						}
					}
					.border_line{
						border-right: 1rpx solid #EDEEF2;
					}
				}
				
				.menu_box{
					width: 100%;
					padding: 30rpx;
					box-sizing: border-box;
					background-color: #fff;
					margin-top: 20rpx;
					border-radius: 14rpx;
					
					.menu_item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0;
						
						.menu_left{
							display: flex;
							align-items: center;
							
							.menu_title{
								color: #000;
								font-size: 28rpx;
								font-weight: 400;
								margin-left: 4rpx;
							}
						}
						.menu_right{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #86909C;
							
							.desc{
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
